<template>
	<view class="introScroll">
		<view class="topView">
			<!-- 城市搜索输入框 -->
			<view class="serchView">
				<view class="serch">
					<image class="serchIconImage" src="/static/home/Vector.png"></image>
					<input @input="cityInputListener" adjust-position="false" class="serchInput" placeholder="搜索变电站名称" type="text" />
				</view>
			</view>
			<!-- 定位城市-标题 -->
			<!-- <view class="nowCityTextTipsView">
				<text class="nowLocationCity">当前定位城市</text>
			</view> -->
			<!-- 定位城市-内容 -->
			<!-- <view class="againLocationView">
				<text class="loactionText">{{nowCity}}</text>
				<text class="loactionStatusText">{{locationStatus}}</text>
				<image :animation="animation" @click="locationImageClick" class="refreshImage" src="/static/app-plus/image/index/refreshIcon.png"></image>
			</view> -->
		</view>
		<!-- 右侧字母 -->
		<view class='city_right'>
			<text class='letter_item' v-for='(item,index) in letter' :key='index' @tap.stop='letterTap(index)'>{{item}}</text>
		</view>
		<scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId">
			<!-- 热门城市 -->
			<!-- <text class="hotCityTips" :id="'re'">热门城市</text>
			<view class='new_city_box'>
				<text class='new_city_text' v-for='(item,index) in hotCityList' :key='index' @tap.stop='cityTap(index)'>{{item.city}}</text>
			</view> -->
			<!-- 城市列表 -->
			<view class="forCityView">
				<view class="forCityItem" v-for="(item,index) in allCityList" :key="index" >
					<view class="" v-if="item.value.length != 0">
						<view :id="item.key" class="letterItemFirst">{{item.key}}</view>
						<view class="" style="padding: 0 40rpx;border-bottom: 2rpx soild gray;">
							<u-checkbox-group  v-for="(i,k) in item.value" :key="k" style="display: block;" >
								<u-checkbox v-model="i.checked" shape="circle" active-color="#000" label-disabled  @change="cityItemClick(i,k,item,index)">
									<text class="itemCityContent">{{i.substationName}}</text>
								</u-checkbox>
							</u-checkbox-group>
							<!-- <view v-if="!item.last" class="line"></view> -->
						</view>
						
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>
 
 
<script>
	export default {
		data() {
			return {
				nowCity: '',
				locationStatus: '定位成功',
				letter: ['热', "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
					"U", "V", "W", "X", "Y", "Z"
				],
				//热门城市
				hotCityList: [],
				checked: false,
				//全部城市
				allCityList: [
					{
					  "key": "A",
					  "value": []
					},
					{
					  "key": "B",
					  "value": []
					},
					{
					  "key": "C",
					  "value": [
						{
						  "id": "1676481324319547394",
						  "keyword": null,
						  "areaId": "1676478238226161666",
						  "areaName": "高新区",
						  "leaderName": "张三",
						  "typeId": "1676480948082089986",
						  "typeName": "GIS",
						  "voltageLevelId": null,
						  "substationNo": "1",
						  "substationName": "测试变电站1",
						  "createBy": null,
						  "createTime": "2023-07-05 14:41:10",
						  "updateBy": null,
						  "updateTime": null
						},
						{
						  "id": "1676481324319547394",
						  "keyword": null,
						  "areaId": "1676478238226161666",
						  "areaName": "高新区",
						  "leaderName": "张三",
						  "typeId": "1676480948082089986",
						  "typeName": "GIS",
						  "voltageLevelId": null,
						  "substationNo": "1",
						  "substationName": "测试变电站222",
						  "createBy": null,
						  "createTime": "2023-07-05 14:41:10",
						  "updateBy": null,
						  "updateTime": null
						}
					  ]
					},
					{
					  "key": "D",
					  "value": []
					},
					{
					  "key": "E",
					  "value": []
					},
					{
					  "key": "F",
					  "value": []
					},
					{
					  "key": "G",
					  "value": []
					},
					{
					  "key": "H",
					  "value": []
					},
					{
					  "key": "I",
					  "value": []
					},
					{
					  "key": "J",
					  "value": []
					},
					{
					  "key": "K",
					  "value": []
					},
					{
					  "key": "L",
					  "value": []
					},
					{
					  "key": "M",
					  "value": [
						{
						  "id": "1678584633780105217",
						  "keyword": null,
						  "areaId": null,
						  "areaName": null,
						  "leaderName": null,
						  "typeId": null,
						  "typeName": null,
						  "voltageLevelId": null,
						  "substationNo": null,
						  "substationName": "名称~~~~",
						  "createBy": "1",
						  "createTime": "2023-07-11 09:58:58",
						  "updateBy": null,
						  "updateTime": null
						}
					  ]
					},
					{
					  "key": "N",
					  "value": []
					},
					{
					  "key": "O",
					  "value": []
					},
					{
					  "key": "P",
					  "value": []
					},
					{
					  "key": "Q",
					  "value": []
					},
					{
					  "key": "R",
					  "value": []
					},
					{
					  "key": "S",
					  "value": []
					},
					{
					  "key": "T",
					  "value": [
						{
						  "id": "1676481585054261250",
						  "keyword": null,
						  "areaId": "1676478421609521154",
						  "areaName": "天府立交",
						  "leaderName": null,
						  "typeId": "1676480948082089986",
						  "typeName": "GIS",
						  "voltageLevelId": null,
						  "substationNo": "2",
						  "substationName": "天赋立交变电站",
						  "createBy": null,
						  "createTime": "2023-07-05 14:42:12",
						  "updateBy": null,
						  "updateTime": null
						}
					  ]
					},
					{
					  "key": "U",
					  "value": []
					},
					{
					  "key": "V",
					  "value": []
					},
					{
					  "key": "W",
					  "value": []
					},
					{
					  "key": "X",
					  "value": []
					},
					{
					  "key": "Y",
					  "value": []
					},
					{
					  "key": "Z",
					  "value": []
					}
				],
				//滑动到指定位置
				scrollId: '',
				//动画
				animation: {},
				//接口请求的数据
				cityList: [],
				lng:'',
				lat:''
			}
		},
 
		onLoad(options) {
			//设置title标题
			this.nowCity = '北京'
			this.hotCityList = this.returnHotCity()
			uni.setNavigationBarTitle({
				// title: '当前城市-' + this.nowCity
				title: '变电站列表'
			})
			//获取全国城市
			// this.getCityList()
			this.getNameList()
		},
 
		methods: {
			//拼音点击事件
			letterTap(index) {
				if (this.letter[index] == '热') {
					this.scrollId = 're'
				} else {
					this.scrollId = this.letter[index]
					this.$utils.toast(this.letter[index])
				}
			},
			 //获取变电站列表
			 getNameList() {
				let that = this
				that.$api.substationNameList().then(res => {
					that.allCityList = res.data.data
					// console.log(that.allCityList,'allCityList')
					that.allCityList = that.allCityList.map(item => {
						// console.log(item.value,'item.value')
						let arr = item.value.map(i=> {
							return {
								...i,
								checked:false
							}
						})
						item.value = arr
						return {
							...item,
							value:arr
						}
					})
					
					// patinetRes.map(item => {
					// 	let arr2 = item.response.split("。").map((item1, index) => {
					// 		if (index < item.response.split("。").length - 1) {
					// 			item1 = item1 + “。”;
					// 			}
					// 		return item1;
					// 		});
					// 	item.response = arr2;此处不能直接返回item，定义一个变量接收内层循环的返回值，item.response等于这个变量
					// 	return item;
					// });

					console.log(that.allCityList ,'that.allCityList ')
					that.formatCityData(that.allCityList)
				})
				
				// this.cityList = this.getAllCity()
				
			 },
			//搜索
			cityInputListener(e) {
				let value = e.detail.value
				let cityAll = this.allCityList
				let newArray = []
				for (let i = 0; i < cityAll.length; i++) {
					if (cityAll[i].city.indexOf(value) != -1 || cityAll[i].letter == value.toUpperCase()) {
						newArray.push(cityAll[i])
					}
				}
				if (value == '') {
					this.formatCityData(this.cityList)
				} else {
					this.formatCityData(newArray)
				}
			},
 
			//获取地址
			getdcAddress(){
				let that = this
				that.$api.dcAddress({
					lng: this.lng,
					lat: this.lat,
				}).then(res => {
					// console.log(res,'地址')
					this.address = res.data.data
					this.shop_id = res.data.data.shop_id
					this.getShopData()
				}) 
			},
			// 定位
			locationImageClick() {
				console.log('kais')
				var that = this
				this.animation = uni.createAnimation()
				this.animation.rotate(360).step()
				this.animation = this.animation.export()
				this.locationStatus = '定位中...'
				uni.getLocation({
					geocode: true, // 是否解析地址信息（返回详细格式化地址信息）
					success: res => {
						this.lng = res.longitude
						this.lat = res.latitude
						// console.log(res,'reds')
						that.getdcAddress()
						// 获取当前位置坐标
						if (res.address != undefined) {
							that.nowCity = res.address.city;
							that.locationStatus = '定位成功'
						}
					},
					fail: res => {
						that.nowCity = '获取定位信息失败'
						console.log("获取定位信息失败");
					}
				});
 
			},
 
			//获取城市列表	
			getCityList() {
				let that = this
				that.$api.cityList().then(res => {
					this.cityList = res.data.data
					this.cityList = this.cityList.map(item=>{
						return {
							city:item.name,
							letter:item.first,
							id:item.id
						}
					})
					this.formatCityData(this.cityList)
				})
				// this.cityList = this.getAllCity()
				
			},
 
			formatCityData(array) {
				for (let i = 0; i < array.length; i++) {
					if (i == 0) {
						//第一条显示首字母
						array[i].show = true
					} else if (array[i].letter != array[i - 1].letter) {
						//首字母与上一条不一样需要显示
						array[i].show = true
						array[i - 1].last = true
					}
					if (array.length == 1) {
						array[0].last = true
					}
					array.show = false
				}
				this.allCityList = array
				// console.log(this.allCityList,'this.allCityList')
			},
 
			//城市条目点击
			cityItemClick(t,i,list,num) {
				// console.log(t,'index',list.key)
				list.value.forEach((item,index) => {
						if(index == i) {
							item.checked = !item.checked
						}else{
							
							// this.allCityList.forEach((item,index)=>{
							// 	if(index != num){
							// 		item[index].value = item[index].value.map(i => {
							// 			return {
							// 				...i,
							// 				checked:false
							// 			}
							// 		})
							// 	}
							// })
							item.checked = false
						}
				})
				
				// console.log(this.allCityList)
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				prevPage.$vm.substationId = t.id;
				prevPage.$vm.id = '';
				prevPage.$vm.imgList[3].title = '';
				prevPage.$vm.imgList[1].title = t.substationName;//修改上一页data里面的searchVal参数值为1211
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1,
					})
				},500)
				
				// uni.navigateBack({
				// 	delta: 1,
				// },500)
			},
 
			//热门城市点击
			cityTap(index) {
				var data = this.hotCityList[index]
				uni.$emit('data', data);
				uni.navigateBack({
					delta: 1,
				})
			},
 
			returnHotCity() {
				var list = [{
					"city": "北京市",
					"id":2,
				}, {
					"city": "天津市",
					"id":20,
				}, {
					"city": "上海市",
					"id":802,
				}, {
					"city": "南京市",
					"id":821,
				}, {
					"city": "广州市",
					"id":1965,
				}, {
					"city": "深圳市",
					"id":1988,
				}, {
					"city": "武汉市",
					"id":1710,
				}, {
					"city": "成都市",
					"id":2368,
				}, {
					"city": "厦门市",
					"id":1183,
				}]
				return list;
			},
			// getAllCity() {}
		}
	}
</script>
 
<style>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}
 
	.introScroll {
		height: 100%;
		width: 100%;
		display: flex;
		position: relative;
	}
 
	.topView {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 99;
		width: 100%;
	}
 
	.serchView {
		width: 100%;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
	}
 
	.serch {
		width: 690rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
 
	.serchIconImage {
		width: 32rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}
 
	.serchInput {
		height: 70rpx;
		width: 600rpx;
		margin-left: 12rpx;
		font-size: 30rpx;
		color: #000000;
	}
 
	.nowCityTextTipsView {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #F5F5F5;
		height: 50rpx;
		width: 100%;
		padding-bottom: 14rpx;
	}
 
	.nowLocationCity {
		line-height: 50rpx;
		font-size: 28rpx;
		color: #999999;
		margin-left: 36rpx;
		margin-top: 15rpx;
	}
 
	.againLocationView {
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
	}
 
	.loactionText {
		font-size: 30rpx;
		color: #129DFF;
		margin-left: 30rpx;
	}
 
	.loactionStatusText {
		margin-left: 50rpx;
		font-size: 30rpx;
		color: #999999;
	}
 
	.refreshImage {
		position: absolute;
		right: 48rpx;
		padding: 10rpx;
		width: 38rpx;
		height: 38rpx;
	}
 
	.cityListView {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-top: 125rpx;
		position: relative;
		overflow: scroll;
	}
 
	.city_right {
		z-index: 99;
		width: 60rpx;
		display: flex;
		height: 100%;
		position: absolute;
		right: 0;
		flex-direction: column;
		justify-content: center;
		top: 120rpx;
	}
 
	.letter_item {
		display: block;
		font-size: 20rpx;
		color: #666;
		text-align: center;
		padding-left: 20rpx;
		padding-top: 3rpx;
		padding-bottom: 3rpx;
		font-weight: bold;
	}
 
	.hotCityTips {
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #999999;
	}
 
	.new_city_box {
		margin-top: 26rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 60rpx 0 20rpx;
	}
 
	.new_city_text {
		width: 114rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #333;
		background: #fff;
		border-radius: 21rpx;
		margin: 0 10rpx 20rpx 10rpx;
	}
 
	.forCityView {
		width: 100%;
		padding-bottom: 30rpx;
	}
 
	.forCityItem {
		display: flex;
		flex-direction: column;
		background: #fff;
	}
 
	.letterItemFirst {
		height: 49rpx;
		padding-left: 40rpx;
		font-size: 30rpx;
		line-height: 49rpx;
		color: #000;
		background: #f7f7f7;
		width: 100%;
	}
 
	.itemCityContent {
		display: inline-block;
		width: 100%;
		height: 90rpx;
		font-size: 32rpx;
		color: #000000;
		padding-left: 30rpx;
		background-color: #FFFFFF;
		line-height: 90rpx;
	}
 
	.line {
		width: 642rpx;
		height: 1rpx;
		background-color: #ebebeb;
		margin-left: 40rpx;
	}
</style>